import { Card, Typography, Radio, Button, Tag, Space, Row, Col } from 'antd'
import TestLight from '../TestLight'

interface Props {
  id: number
  name: string
  defaultValue: number
  value: number
  type: string
  reaction: boolean | null
  onChange: (id: number, value: number) => void
  onClick: (id: number, value: number) => void
}

// 受控组件 从父组件接收textValue和textResult 子组件本地切换时, 调用onValueChange通知父组件更新数据
export default function GpioCard(props: Props) {
  const { id, name, defaultValue, value, type, reaction, onChange, onClick } = props

  return (
    <Card size="small">
      <div className={`flex gap-2 items-center justify-between`}>
        <div className="flex gap-2 items-center">
          <TestLight value={reaction} />
          <Typography.Text strong className="leading-none">
            {name}
          </Typography.Text>
        </div>

        <div className="flex gap-2 items-center">
          {

            type === "OUTPUT" ? <Radio.Group
              optionType="button"
              buttonStyle="solid"
              block
              size="small"
              options={[
                { label: '0', value: 0 },
                { label: '1', value: 1 }
              ]}
              value={defaultValue}
              onChange={onChange}
            /> : <div>{value}</div>

          }
          <Button type="primary" size="small" className="w-full" onClick={onClick}>
            测试
          </Button>
        </div>
      </div>
    </Card>
  )
}
